WebXR „Hit Test“ rezultatas: spindulių metimo (Ray Casting) rezultatų apdorojimas įtraukiančioms patirtims

WebXR įrenginių API atveria įdomias galimybes kurti įtraukiančias papildytos realybės (AR) ir virtualios realybės (VR) patirtis tiesiogiai naršyklėje. Vienas iš esminių interaktyvių WebXR programų kūrimo aspektų yra „hit test“ rezultatų supratimas ir efektyvus naudojimas. Šiame tinklaraščio įraše pateikiamas išsamus vadovas, kaip apdoroti „hit test“ rezultatus, gautus naudojant spindulių metimą (ray casting), leidžiantį jums sukurti intuityvias ir patrauklias vartotojo sąveikas jūsų WebXR scenose.

Kas yra spindulių metimas (Ray Casting) ir kodėl jis svarbus WebXR?

Spindulių metimas (Ray casting) – tai technika, naudojama nustatyti, ar spindulys, sklindantis iš tam tikro taško ir krypties, susikerta su objektais 3D scenoje. WebXR aplinkoje spindulių metimas paprastai naudojamas imituoti vartotojo žvilgsnį arba virtualaus objekto trajektoriją. Kai spindulys susikerta su realaus pasaulio paviršiumi (AR) arba virtualiu objektu (VR), sugeneruojamas „hit test“ rezultatas.

„Hit test“ rezultatai yra labai svarbūs dėl kelių priežasčių:

• Virtualių objektų išdėstymas: AR aplinkoje „hit test“ leidžia tiksliai išdėstyti virtualius objektus ant realaus pasaulio paviršių, tokių kaip stalai, grindys ar sienos.
• Vartotojo sąveika: Sekdami, kur vartotojas žiūri ar rodo, „hit test“ leidžia sąveikauti su virtualiais objektais, pavyzdžiui, juos pasirinkti, manipuliuoti ar aktyvuoti.
• Navigacija: VR aplinkose „hit test“ gali būti naudojami navigacijos sistemoms įdiegti, leidžiant vartotojams teleportuotis ar judėti scenoje, rodant į konkrečias vietas.
• Susidūrimų aptikimas: „Hit test“ gali būti naudojami pagrindiniam susidūrimų aptikimui, nustatant, kada virtualus objektas susiduria su kitu objektu ar realiu pasauliu.

WebXR Hit Test API supratimas

WebXR Hit Test API suteikia reikiamus įrankius spindulių metimui atlikti ir „hit test“ rezultatams gauti. Štai pagrindinių sąvokų ir funkcijų apžvalga:

XRRay

XRRay atspindi spindulį 3D erdvėje. Jis apibrėžiamas pradžios tašku ir krypties vektoriumi. Galite sukurti XRRay naudodami XRFrame.getPose() metodą, kuris grąžina sekamo įvesties šaltinio (pvz., vartotojo galvos, rankos valdiklio) pozą. Iš pozos galite išvesti spindulio pradžios tašką ir kryptį.

XRHitTestSource

XRHitTestSource atspindi „hit test“ rezultatų šaltinį. „Hit test“ šaltinį sukuriate naudodami XRSession.requestHitTestSource() arba XRSession.requestHitTestSourceForTransientInput() metodą. Pirmasis metodas paprastai naudojamas nuolatiniam „hit test“ atlikimui, pagrįstam nuolatiniu šaltiniu, pavyzdžiui, vartotojo galvos padėtimi, o antrasis skirtas trumpalaikiams įvesties įvykiams, pavyzdžiui, mygtukų paspaudimams ar gestams.

XRHitTestResult

XRHitTestResult atspindi vieną susikirtimo tašką tarp spindulio ir paviršiaus. Jame yra informacija apie susikirtimą, pavyzdžiui, atstumas nuo spindulio pradžios taško iki susikirtimo taško ir susikirtimo taško poza scenos atskaitos sistemoje.

XRHitTestResult.getPose()

Šis metodas grąžina susikirtimo taško XRPose. Pozoje yra susikirtimo taško padėtis ir orientacija, kurias galima naudoti virtualiems objektams išdėstyti ar kitoms transformacijoms atlikti.

„Hit Test“ rezultatų apdorojimas: žingsnis po žingsnio vadovas

Panagrinėkime „hit test“ rezultatų gavimo ir apdorojimo procesą WebXR programoje. Šiame pavyzdyje daroma prielaida, kad naudojate atvaizdavimo biblioteką, tokią kaip three.js ar Babylon.js.

1. „Hit Test“ šaltinio užklausa

Pirma, jums reikia paprašyti „hit test“ šaltinio iš XRSession. Tai paprastai daroma po to, kai sesija prasidėjo. Jums reikės nurodyti koordinačių sistemą, kurioje norite gauti „hit test“ rezultatus. Pavyzdžiui:

            let xrHitTestSource = null;

async function createHitTestSource(xrSession) {
  try {
    xrHitTestSource = await xrSession.requestHitTestSource({
      space: xrSession.viewerSpace // Or xrSession.local
    });
  } catch (error) {
    console.error("Failed to create hit test source: ", error);
  }
}

// Call this function after the XR session has started
// createHitTestSource(xrSession);

            

              
                Copy
              
            
          

Paaiškinimas:

• xrSession.requestHitTestSource(): ši funkcija prašo „hit test“ šaltinio iš XR sesijos.
• { space: xrSession.viewerSpace }: tai nurodo koordinačių sistemą, kurioje bus grąžinami „hit test“ rezultatai. viewerSpace yra susijusi su žiūrovo padėtimi, o local – su XR pradžios tašku. Taip pat galite naudoti localFloor sekimui, susijusiam su grindimis.
• Klaidų apdorojimas: try...catch blokas užtikrina, kad klaidos, įvykusios kuriant „hit test“ šaltinį, būtų pagautos ir užregistruotos.

2. „Hit Test“ atlikimas animacijos cikle

Savo animacijos cikle (funkcijoje, kuri atvaizduoja kiekvieną kadrą), turėsite atlikti „hit test“ naudodami XRFrame.getHitTestResults() metodą. Šis metodas grąžina XRHitTestResult objektų masyvą, atspindintį visus scenoje rastus susikirtimus.

            function onXRFrame(time, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);

  const pose = frame.getViewerPose(xrSession.referenceSpace);

  if (pose) {
    if (xrHitTestSource) {
      const hitTestResults = frame.getHitTestResults(xrHitTestSource);

      if (hitTestResults.length > 0) {
        processHitTestResults(hitTestResults);
      }
    }
  }

  renderer.render(scene, camera);
}

            

              
                Copy
              
            
          

Paaiškinimas:

• frame.getViewerPose(xrSession.referenceSpace): gauna žiūrovo (ausinių) pozą. Tai būtina norint žinoti, kur yra žiūrovas ir kur jis žiūri.
• frame.getHitTestResults(xrHitTestSource): atlieka „hit test“ naudojant anksčiau sukurtą „hit test“ šaltinį.
• hitTestResults.length > 0: tikrina, ar rasta susikirtimų.

3. „Hit Test“ rezultatų apdorojimas

Funkcija processHitTestResults() yra vieta, kurioje tvarkysite „hit test“ rezultatus. Paprastai tai apima virtualaus objekto padėties ir orientacijos atnaujinimą, remiantis susikirtimo taško poza.

            function processHitTestResults(hitTestResults) {
  const hit = hitTestResults[0]; // Get the first hit result
  const hitPose = hit.getPose(xrSession.referenceSpace);

  if (hitPose) {
    // Update the position and orientation of a virtual object
    virtualObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    virtualObject.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);

    // Show visual feedback (e.g., a circle) at the hit point
    hitMarker.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    hitMarker.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    hitMarker.visible = true;
  } else {
    hitMarker.visible = false;
  }
}

            

              
                Copy
              
            
          

Paaiškinimas:

• hitTestResults[0]: paima pirmąjį „hit test“ rezultatą. Jei galimi keli susikirtimai, gali tekti peržiūrėti visą masyvą ir pasirinkti tinkamiausią rezultatą, atsižvelgiant į jūsų programos logiką.
• hit.getPose(xrSession.referenceSpace): gauna susikirtimo taško pozą nurodytoje atskaitos sistemoje.
• virtualObject.position.set(...) ir virtualObject.quaternion.set(...): atnaujina virtualaus objekto (pvz., three.js Mesh) padėtį ir sukimąsi (kvaternioną), kad atitiktų susikirtimo taško pozą.
• Vizualinis grįžtamasis ryšys: pavyzdyje taip pat yra kodas, rodantis vizualinį grįžtamąjį ryšį susikirtimo taške, pavyzdžiui, apskritimą ar paprastą žymeklį, kad padėtų vartotojui suprasti, kur jis sąveikauja su scena.

Pažangios „Hit Test“ technikos

Be aukščiau pateikto pagrindinio pavyzdžio, yra keletas pažangių technikų, kurias galite naudoti norėdami patobulinti savo „hit test“ įgyvendinimus:

„Hit Test“ su trumpalaike įvestimi

Sąveikoms, kurias sukelia trumpalaikė įvestis, pavyzdžiui, mygtukų paspaudimai ar rankų gestai, galite naudoti XRSession.requestHitTestSourceForTransientInput() metodą. Šis metodas sukuria „hit test“ šaltinį, kuris yra specifinis vienam įvesties įvykiui. Tai naudinga norint išvengti netyčinių sąveikų, pagrįstų nuolatiniu „hit test“ atlikimu.

            async function handleSelect(event) {
  try {
    const frame = event.frame;
    const inputSource = event.inputSource;

    const hitTestResults = await frame.getHitTestResultsForTransientInput(inputSource, {
      profile: 'generic-touchscreen', // Or the appropriate input profile
      space: xrSession.viewerSpace
    });

    if (hitTestResults.length > 0) {
      processHitTestResults(hitTestResults);
    }
  } catch (error) {
    console.error("Error during transient hit test: ", error);
  }
}

// Attach this function to your input select event listener
// xrSession.addEventListener('select', handleSelect);

            

              
                Copy
              
            
          

„Hit Test“ rezultatų filtravimas

Kai kuriais atvejais galbūt norėsite filtruoti „hit test“ rezultatus pagal konkrečius kriterijus, pavyzdžiui, atstumą nuo spindulio pradžios taško arba susikirtusio paviršiaus tipą. Tai galite pasiekti rankiniu būdu filtruodami XRHitTestResult masyvą po jo gavimo.

            function processHitTestResults(hitTestResults) {
  const filteredResults = hitTestResults.filter(result => {
    const hitPose = result.getPose(xrSession.referenceSpace);
    if (!hitPose) return false; // Skip if no pose

    const distance = Math.sqrt(
      Math.pow(hitPose.transform.position.x - camera.position.x, 2) +
      Math.pow(hitPose.transform.position.y - camera.position.y, 2) +
      Math.pow(hitPose.transform.position.z - camera.position.z, 2)
    );

    return distance < 2; // Only consider hits within 2 meters
  });

  if (filteredResults.length > 0) {
    const hit = filteredResults[0];
    const hitPose = hit.getPose(xrSession.referenceSpace);

    if (hitPose) {
      // Update object position based on the filtered result
      virtualObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
      virtualObject.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    }
  }
}

            

              
                Copy
              
            
          

Skirtingų atskaitos sistemų naudojimas

Atskaitos sistemos pasirinkimas (viewerSpace, local, localFloor ar kitos pasirinktinės sistemos) ženkliai veikia, kaip interpretuojami „hit test“ rezultatai. Apsvarstykite šiuos dalykus:

• viewerSpace: pateikia rezultatus, susijusius su žiūrovo padėtimi. Tai naudinga kuriant sąveikas, tiesiogiai susijusias su vartotojo žvilgsniu.
• local: pateikia rezultatus, susijusius su XR pradžios tašku (XR sesijos pradžios tašku). Tai tinka kuriant patirtis, kuriose objektai lieka fiksuoti fizinėje aplinkoje.
• localFloor: panaši į local, bet Y ašis yra sulygiuota su grindimis. Tai supaprastina objektų dėjimo ant grindų procesą.

Pasirinkite atskaitos sistemą, kuri geriausiai atitinka jūsų programos reikalavimus. Eksperimentuokite su skirtingomis atskaitos sistemomis, kad suprastumėte jų elgseną ir apribojimus.

„Hit Test“ optimizavimo strategijos

„Hit test“ gali būti skaičiavimo požiūriu intensyvus procesas, ypač sudėtingose scenose. Štai keletas optimizavimo strategijų, kurias verta apsvarstyti:

• Apribokite „hit test“ dažnumą: atlikite „hit test“ tik tada, kai tai būtina, o ne kiekviename kadre. Pavyzdžiui, galite atlikti „hit test“ tik tada, kai vartotojas aktyviai sąveikauja su scena.
• Naudokite ribojančių tūrių hierarchiją (BVH): jei atliekate „hit test“ su dideliu skaičiumi objektų, apsvarstykite galimybę naudoti BVH, kad paspartintumėte susikirtimų skaičiavimus. Bibliotekos, tokios kaip three.js ir Babylon.js, turi integruotas BVH implementacijas.
• Erdvinis skaidymas: padalinkite sceną į mažesnius regionus ir atlikite „hit test“ tik tuose regionuose, kuriuose tikėtina rasti susikirtimų. Tai gali žymiai sumažinti tikrinamų objektų skaičių.
• Sumažinkite daugiakampių skaičių: supaprastinkite savo modelių geometriją, kad sumažintumėte tikrinamų daugiakampių skaičių. Tai gali pagerinti našumą, ypač mobiliuosiuose įrenginiuose.
• WebWorker: perkelkite skaičiavimus į „web worker“, kad užtikrintumėte, jog „hit test“ procesas neužblokuotų pagrindinės gijos.

Tarpplatforminiai aspektai

WebXR siekia būti tarpplatforminiu, tačiau gali būti subtilių elgsenos skirtumų tarp skirtingų įrenginių ir naršyklių. Turėkite omenyje šiuos dalykus:

• Įrenginio galimybės: ne visi įrenginiai palaiko visas WebXR funkcijas. Naudokite funkcijų aptikimą, kad nustatytumėte, kurios funkcijos yra prieinamos, ir atitinkamai pritaikykite savo programą.
• Įvesties profiliai: skirtingi įrenginiai gali naudoti skirtingus įvesties profilius (pvz., generic-touchscreen, hand-tracking, gamepad). Užtikrinkite, kad jūsų programa palaikytų kelis įvesties profilius ir pateiktų tinkamus atsarginius mechanizmus.
• Našumas: našumas gali labai skirtis tarp skirtingų įrenginių. Optimizuokite savo programą silpniausiems įrenginiams, kuriuos planuojate palaikyti.
• Naršyklių suderinamumas: užtikrinkite, kad jūsų programa būtų išbandyta ir veiktų pagrindinėse naršyklėse, tokiose kaip „Chrome“, „Firefox“ ir „Edge“.

Pasauliniai WebXR programų, naudojančių „Hit Test“, pavyzdžiai

Štai keletas WebXR programų pavyzdžių, kurie efektyviai naudoja „hit test“, kad sukurtų įtikinamas ir intuityvias vartotojo patirtis:

• IKEA Place (Švedija): leidžia vartotojams virtualiai išdėstyti IKEA baldus savo namuose naudojant AR. „Hit test“ naudojamas tiksliai išdėstyti baldus ant grindų ir kitų paviršių.
• Sketchfab AR (Prancūzija): leidžia vartotojams peržiūrėti 3D modelius iš „Sketchfab“ AR aplinkoje. „Hit test“ naudojamas modeliams išdėstyti realiame pasaulyje.
• Papildyti vaizdai (Įvairūs): daugelis AR programų naudoja vaizdų sekimą kartu su „hit test“, kad pritvirtintų virtualų turinį prie konkrečių vaizdų ar žymeklių realiame pasaulyje.
• WebXR žaidimai (Pasauliniai): kuriama daugybė žaidimų naudojant WebXR, iš kurių daugelis remiasi „hit test“ objektų išdėstymui, sąveikai ir navigacijai.
• Virtualūs turai (Pasauliniai): įtraukiantys turai po vietas, muziejus ar nekilnojamąjį turtą dažnai naudoja „hit test“ vartotojo navigacijai ir interaktyviems elementams virtualioje aplinkoje.

Išvada

WebXR „hit test“ rezultatų ir spindulių metimo apdorojimo įvaldymas yra būtinas kuriant įtikinamas ir intuityvias AR ir VR patirtis internete. Suprasdami pagrindines sąvokas ir taikydami šiame tinklaraščio įraše aprašytas technikas, galite kurti įtraukiančias programas, kurios sklandžiai sujungia virtualų ir realų pasaulius, arba kurti patrauklias virtualias aplinkas su natūraliomis ir intuityviomis vartotojo sąveikomis. Nepamirškite optimizuoti savo „hit test“ įgyvendinimo našumui ir atsižvelgti į tarpplatforminį suderinamumą, kad užtikrintumėte sklandžią patirtį visiems vartotojams. WebXR ekosistemai toliau tobulėjant, tikėkitės tolesnių „hit test“ API patobulinimų ir pakeitimų, atveriančių dar daugiau kūrybinių galimybių įtraukiančiam interneto kūrimui. Visada pasitarkite su naujausiomis WebXR specifikacijomis ir naršyklės dokumentacija, kad gautumėte naujausią informaciją.